<template>
  <div class="createStore">
    <div class="createStoreOne" v-show="createStoreOne">
       <el-form :inline="true" :model="productForm" ref="productForm" :rules="rules" class="form-inline">
          <el-form-item prop="vendorId">
            <span class="l">商家</span><br />
            <el-select v-model="productForm.vendorId" placeholder="请选择">
              <el-option
                v-for="item in brandLists"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item><br />
          <el-form-item prop="storeName">
            <span class="l">店铺名称</span>
            <el-input v-model="productForm.storeName" placeholder="店铺名称"></el-input>
          </el-form-item><br />
          <el-form-item prop="contractName">
            <span class="l">合同名称</span>
            <el-input v-model="productForm.contractName" :maxlength="100" type="number/string" placeholder="合同名称"></el-input>
          </el-form-item><br />
          <el-form-item prop="contractNo">
            <span class="l">合同编号</span>
            <el-input v-model="productForm.contractNo" :maxlength="50" placeholder="合同编号"></el-input>
          </el-form-item><br />
          <el-form-item>
            <span class="l">管理费类型</span>
            <div class="grid-content bg-purple-light">
              <el-select v-model="productForm.manageRebatesType">
                <el-option label="按比例" value="1"></el-option>
                <el-option label="固定额" value="2"></el-option>
              </el-select>
              <span v-if="productForm.manageRebatesType == 1"><el-input class="createStore-inputw" v-model="productForm.manageRebatesRate"></el-input>%</span>
              <span v-if="productForm.manageRebatesType == 2"><el-input class="createStore-inputw" v-model="productForm.manageRebatesRate"></el-input>元/年</span>
            </div>
          </el-form-item><br />
          <el-form-item>
            <span class="l">返利方式</span>
            <div class="grid-content bg-purple-light">
              <el-select v-model="productForm.coinRebatesType">
                <el-option label="按比例" value="1"></el-option>
                <el-option label="商品定额" value="0"></el-option>
                <el-option label="不设置店铺返利比例" value="2"></el-option>
              </el-select><span v-if="productForm.coinRebatesType == 1"><el-input class="createStore-inputw" v-model="productForm.coinRebatesRate"></el-input>%</span>
              <span v-if="productForm.coinRebatesType == 0"><el-input class="createStore-inputw" v-model="productForm.coinRebatesRate"></el-input>元/件</span>
            </div>
          </el-form-item><br />
           <el-form-item>
            <el-button type="primary" @click="nextSubmit">下一步</el-button>
            <el-button @click="cancelBtn">取 消</el-button>
          </el-form-item>
        </el-form>
    </div>
    <div class="createStoreTwo" v-show="createStoreTwo">
      <el-form :inline="true" :model="productForm" ref="productForm" class="form-inline">
        <el-form-item label="店铺名称">
          <el-input v-model="productForm.storeName" readonly="true"></el-input>
        </el-form-item><br />
        <el-form-item label="合同名称">
          <el-input v-model="productForm.contractName" readonly="true"></el-input>
        </el-form-item><br />
        <el-form-item label="返利方式">
          <el-input v-if="productForm.coinRebatesType == 0" readonly="true" placeholder="商品定额"></el-input>
          <el-input v-if="productForm.coinRebatesType == 1" readonly="true" placeholder="按比例"></el-input>
          <el-input v-if="productForm.coinRebatesType == 2" readonly="true" placeholder="不设置店铺返利比例"></el-input>
        </el-form-item><br />
        <el-form-item label="售卖类型">
          <el-radio-group v-model="productForm.storeType">
            <el-radio label="线上店铺"></el-radio>
            <el-radio label="线下店铺"></el-radio>
          </el-radio-group>
        </el-form-item><br />
        <el-form-item label="店铺类型">
          <el-select v-model="productForm.storeBusinessType" placeholder="奢品">
            <el-option label="奢品" value="10"></el-option>
          </el-select>
        </el-form-item><br />
        <el-form-item label="商品分类">
          <el-checkbox-group v-model="categorySysnoList">
            <el-checkbox v-for="queryItem in queryLists" :label="queryItem" name="queryItem">{{queryItem.categoryName}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item><br />
        <el-form-item label="是否自营">
         <el-radio-group v-model="productForm.selfSupport">
            <el-radio label="自营" value="0"></el-radio>
            <el-radio label="非自营" value="1"></el-radio>
          </el-radio-group>
        </el-form-item><br />
        <el-form-item>
          <el-button type="primary" @click="nextSubmitTwo">下一步</el-button>
          <el-button @click="cancelBtnTwo">取 消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="createStoreThree" v-show="createStoreThree">
      <el-form :inline="true" :model="productForm" ref="productForm" class="form-inline">
        <el-form-item prop="userTelephone" label="手机">
          <el-input v-model="productForm.userTelephone"></el-input>
        </el-form-item><br />
        <el-form-item prop="userName" label="姓名">
          <el-input v-model="productForm.userName"></el-input>
        </el-form-item><br />
        <el-form-item label="角色">
          <span>{{userRole}}</span>
        </el-form-item><br />
        <el-form-item>
          <el-button type="primary" @click="nextSubmitThree">确认创建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {mapGetters, mapActions} from 'vuex'
  export default{
    name: 'createStore',
    data () {
      return {
        productForm: {
          contractName: '',
          vendorId: '',
          contractNo: '',
          manageRebatesType: '',
          coinRebatesType: '',
          manageRebatesRate: '',
          coinRebatesRate: 0,
          storeName: '',
          storeType: '线上店铺',
          storeBusinessType: '',
          categorySysno: '',
          selfSupport: '自营',
          userTelephone: '',
          userName: '',
          signContractTime: '2020-08-30 10:44:18',
          termOfContract: '2020-08-30 10:44:18'
        },
        categorySysnoList: [],
        rules: {
          storeName: [
            {required: true, min: 1, message: '输入不能为空', trigger: 'blur'},
            {required: true, max: 100, message: '长度不能超过100个字符', trigger: 'blur'}
          ],
          contractName: [
            {required: true, min: 1, message: '输入不能为空', trigger: 'blur'},
            {required: true, max: 100, message: '长度不能超过100个字符', trigger: 'blur'}
          ],
          contractNo: [
            {required: true, min: 1, message: '输入不能为空', trigger: 'blur'},
            {required: true, max: 50, message: '长度不能超过50个字符', trigger: 'blur'}
          ],
          userTelephone: [
            {required: true, min: 1, message: '输入不能为空', trigger: 'blur'},
            {required: true, max: 11, message: '长度不能超过11位', trigger: 'blur'},
            {required: true, type: 'number', message: '手机号只能是数字', trigger: 'blur'}
          ],
          userName: [
            {required: true, min: 1, message: '输入不能为空', trigger: 'blur'},
            {required: true, max: 20, message: '长度不能超过20个字符', trigger: 'blur'}
          ],
          manageRebatesRate: [
            {required: true, type: 'number', message: '输入不能为空', trigger: 'blur'}
          ]
        },
        brandLists: {},
        createStoreOne: true,
        createStoreTwo: false,
        createStoreThree: false
      }
    },
    computed: {
      // 映射State
      ...mapGetters([
        'isLogin'
      ])
    },
    methods: {
      ...mapActions([
        'getStorage', 'setStorage'
      ]),
      brandList () {
        axios.post('/api/vendor/queryAllName', {token: this.erpToken}).then((res) => {
          if (res.data.code === 9999) {
            this.brandLists = res.data.data
          }
        })
        axios.post('/api/shop/querylevelTwoCategoryList', {type: 10}).then((res) => {
          if (res.data.code === 9999) {
            this.queryLists = res.data.data
          }
        })
      },
      nextSubmit () {
        if (this.productForm.vendorId === '' || this.productForm.storeName === '' || this.productForm.contractName === '' || this.productForm.manageRebatesType === '' || this.productForm.contractNo === '' || this.productForm.manageRebatesRate === '') {
          this.$alert('请完善所有信息后提交', '提示信息', {confirmButtonText: '确定'})
        } else {
          this.$confirm('合同创建后，名称和编号不可修改，确认继续下一步操作吗？', '提示', {
            confirmButtonText: '下一步',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            this.createStoreOne = false
            this.createStoreTwo = true
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '创建已取消'
            })
          })
        }
      },
      nextSubmitTwo () {
        this.productForm.storeBusinessType = 10
        if (this.productForm.storeName === '' || this.productForm.contractName === '' || this.productForm.rebateMode === '' || this.productForm.resource === '' || this.productForm.region === '' || this.productForm.checkList === '' || this.productForm.selfSupport === '') {
          this.$alert('请完善所有信息后提交', '提示信息', {confirmButtonText: '确定'})
        } else {
          this.createStoreOne = false
          this.createStoreTwo = false
          this.createStoreThree = true
          if (this.productForm.storeType === '线上店铺') {
            this.productForm.storeType = 0
          } else {
            this.productForm.storeType = 1
          }
          if (this.productForm.selfSupport === '自营') {
            this.productForm.selfSupport = 0
          } else {
            this.productForm.selfSupport = 1
          }
          console.log(this.categorySysnoList)
          this.categorySysnoList.forEach((item, key) => {
            this.productForm.categorySysno += item.categorySysno + ','
          })
        }
      },
      nextSubmitThree () {
        if (this.productForm.userTelephone === '' || this.productForm.userName === '') {
          this.$alert('请完善所有信息后提交', '提示信息', {confirmButtonText: '确定'})
        } else {
          this.$confirm('创建后请通知商家完善其他信息', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            console.log(this.productForm)
            var params = this.productForm
            axios.post('/api/shop/createShop', params).then((res) => {
              if (res.data.code === 9999) {
                this.$message({
                  type: 'info',
                  message: '操作成功'
                })
                this.$router.push('/storeManage/1')
              } else {
                this.$message({
                  type: 'info',
                  message: '操作失败'
                })
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '创建已取消'
            })
            this.createStoreOne = true
            this.createStoreTwo = false
            this.createStoreThree = false
          })
        }
      },
      cancelBtn () {
        this.$router.push('/storeManage')
      },
      cancelBtnTwo () {
        this.createStoreOne = true
        this.createStoreTwo = false
        this.createStoreThree = false
      }
    },
    mounted () {
      this.getStorage('erpToken').then((erpToken) => {
        this.erpToken = erpToken.replace(/"/g, '')
      }, function (error) {
        console.log(error)
      })
      this.getStorage('userRole').then((userRole) => {
        this.userRole = userRole
      }, function (error) {
        console.log(error)
      })
      this.brandList()
    }
  }
</script>
<style scoped lang='less'>
  .createStore{
    text-align:center;
    margin-top:20px;
    .l{
      float:left;
    }
    .createStore-inputw{
      width:45px;
      margin:0 5px;
    }
  }
</style>
